<!--
 * @Author: levi7754 levi7754@163.com
 * @Date: 2025-05-08 17:40:29
 * @LastEditors: levi7754 levi7754@163.com
 * @LastEditTime: 2025-10-13 10:11:49
 * @FilePath: \ruoyi-mall-uniapp\src\sheep\components\s-menu-grid\s-menu-grid.vue
 * @Description: 九宫格组件
-->
<template>
  <uni-grid :showBorder="false" :column="4">
    <uni-grid-item
      v-for="(item, index) in data"
      :key="item.code"
      style="width: 25%; height: 80px;"
      @click="handleGo(item)"
    >
      <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
        <view class="img-box" >
          <view
              class="tag-box"
              v-if="item.badge?.show"
              :style="[{ background: item.badge?.bgColor, color: item.badge?.color }]"
          >
            {{ item.badge?.text }}
          </view>
          <image v-if="item.src" class="menu-image" :src="udp.$url.static(item.src)"></image>
          <uni-icons v-else custom-prefix="ucon" :type="`ucon-${item.icon}`" size="36" :color="item.color" />
        </view>
        <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center ss-p-t-5">
          <view class="grid-text" :class="{'grid-menu-selected': item.isSelected, 'grid-menu-small': item.title.length > 10 }">
            {{ item.title }}
          </view>
        </view>
      </view>
    </uni-grid-item>
  </uni-grid>
</template>

<script setup>
import { ref } from "vue"
import { onShow } from '@dcloudio/uni-app';
import { udp, navigateTo } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    default() {
      return () => []
    },
  },
});

const refreshKey = ref(0)

const emits = defineEmits(['select'])

const handleGo = (item) => {
  console.log('item:', item)
  if (item.url) {
    navigateTo(item.url)
  } else {
    props.data.forEach(_ => {
      _.isSelected = _.code === item.code
      _.color = _.code === item.code ? "#EB3924" : "#CCC"
    })
    emits('select', item)
  }

}

onShow(() => {
  refreshKey.value++
})
</script>

<style lang="scss" scoped>
.menu-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20%;
}

.grid-item-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  .img-box {
    position: relative;

    .tag-box {
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      font-size: 2em;
      line-height: 1;
      padding: 0.4em 0.6em 0.3em;
      transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
      transform-origin: 100% 0;
      border-radius: 200rpx;
      white-space: nowrap;
    }
  }

  .title-box {
    .grid-menu-selected {
      color: #EB3924;
    }
    .grid-menu-small {
      font-size: 11px;
    }
  }
}
</style>
